<template>
  <div class="header">
    <div class="header_logo">
      <i>Blog</i>
    </div>
    <div class="header_nav">
      <span
        v-for="item in pages"
        :key="item.path"
        @click="routerToggle(item.path)"
      >
        <i>{{ item.name }}</i>
      </span>
      <span @click="toBms"><i>开放式管理后台</i></span>
    </div>
    <div class="header_icon" @click="openMenu">
      <span
        :class="isOpenMenu ? 'MenuButtonFirstGoOpen' : 'MenuButtonFirstGoClose'"
      ></span>
      <span
        :class="
          isOpenMenu ? 'MenuButtonSecondGoOpen' : 'MenuButtonSecondGoClose'
        "
      ></span>
      <span
        :class="isOpenMenu ? 'MenuButtonThirdGoOpen' : 'MenuButtonThirdGoClose'"
      ></span>
    </div>
    <div class="header_button">
      <!-- <span>
        <svg class="icon sousuo" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </span> -->
      <ThemeSwitch @themeToggle="appStore.themeToggle" />
      <span @click="appStore.login" v-if="!userStore.isLogin">登录</span>
      <template v-if="userStore.isLogin">
        <el-avatar
          class="avatar"
          :src="userStore.avatar"
          @mouseenter="appStore.showAirBubble"
          @mouseleave="appStore.hideAirBubble"
          @error="avatarErrorHandle"
          :size="appStore.isMobile ? 25 : 50"
        />
      </template>
    </div>
  </div>
  <transition mode="out-in" name="mobileMenu">
    <div v-if="isOpenMenu" class="header_mobile_nav">
      <span
        v-for="item in pages"
        :key="item.path"
        @click="routerToggle(item.path, true)"
        >{{ item.name }}</span
      >
      <span @click="toBms">开放式管理后台</span>
    </div>
  </transition>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  import { host } from '@/constants'
  import ThemeSwitch from './ThemeSwitch.vue'
  import useAppStore from '@/store/appStore'
  import useUserStore from '@/store/userStore'
  const appStore = useAppStore()
  const userStore = useUserStore()
  let isOpenMenu = ref(false)

  const openMenu = () => {
    isOpenMenu.value = !isOpenMenu.value
  }
  const pages = [
    { name: '首页', path: 'home' },
    { name: '说说', path: 'talks' },
    { name: '关于', path: 'about' },
    { name: '归档', path: 'pigeonhole' },
    { name: '类型', path: 'type' },
    { name: '留言', path: 'word' },
    // { name: '相册', path: 'photos' },
  ]
  const router = useRouter()
  const routerToggle = (path, isMobile = false) => {
    if (isMobile) isOpenMenu.value = false
    router.push(`/${path}`)
  }
  const avatarErrorHandle = e => {
    console.log(e)
  }

  const toBms = () => {
    location.href = `${host}/bms`
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .header {
      position: relative;
      display: flex;
      width: 90%;
      margin: 0 auto;
      height: 100px;
      padding: 10px 0;
      color: #fff;
      z-index: 10;
      .header_logo {
        font-size: 46px;
        margin-left: 25px;
        margin-right: 50px;
        color: #fff;
      }
      .header_nav {
        flex: 1;
        display: flex;
        font-size: 16px;
        span {
          display: flex;
          justify-content: center;
          flex-wrap: nowrap;
          margin-right: 5px;
          cursor: pointer;
          i {
            padding: 7px 12px;
            margin: auto;
            border-radius: 8px;
            font-size: 16px;
            &:hover {
              opacity: 0.7;
              background: var(--background-secondary);
            }
          }
        }
      }
      .header_button {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        .avatar {
          transition-property: transform;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 0.8s;
          &:hover {
            transform: rotate(1turn);
          }
        }
        span {
          cursor: pointer;
          width: 52px;
          height: 52px;
          line-height: 52px;
          text-align: center;
          img {
            width: 100%;
          }
        }
      }
    }
    .header_icon {
      display: none;
    }
  }
  @media only screen and (max-width: 990px) {
    .header_nav {
      display: none;
    }
    .header {
      display: flex;
      position: relative;
      justify-content: space-between;
      z-index: 10;
      color: #fff;
      padding: 25px 15px 35px;
      .header_logo {
        font-size: 30px;
        color: #fff;
      }
      .header_icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 20%;
        span {
          width: 20px;
          height: 4px;
          margin: 2px 0;
          background-color: #ddd;
        }
      }
      .header_button {
        width: 75%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 16px;

        span {
          width: 48px;
          height: 48px;
          line-height: 50px;
          text-align: center;
          img {
            width: 100%;
          }
        }
      }

      /*给移动端菜单按钮，第一个横杠设置动画*/
      .MenuButtonFirstGoOpen {
        animation: MenuButtonGoOpen 0.3s linear;
        animation-fill-mode: forwards;
      }
      .MenuButtonFirstGoClose {
        animation: MenuButtonGoClose 0.3s linear;
        animation-fill-mode: forwards;
      }
      @keyframes MenuButtonGoOpen {
        0% {
          -ms-transform: rotate(-8deg); /* IE 9 */
          transform: rotate(-8deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        25% {
          -ms-transform: rotate(-16deg); /* IE 9 */
          transform: rotate(-16deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        50% {
          -ms-transform: rotate(-25deg); /* IE 9 */
          transform: rotate(-25deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        75% {
          -ms-transform: rotate(-34deg); /* IE 9 */
          transform: rotate(-34deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        100% {
          -ms-transform: rotate(-43deg); /* IE 9 */
          transform: rotate(-43deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
      }
      @keyframes MenuButtonGoClose {
        0% {
          -ms-transform: rotate(-43deg); /* IE 9 */
          transform: rotate(-43deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        25% {
          -ms-transform: rotate(-34deg); /* IE 9 */
          transform: rotate(-34deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        50% {
          -ms-transform: rotate(-25deg); /* IE 9 */
          transform: rotate(-25deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        75% {
          -ms-transform: rotate(-16deg); /* IE 9 */
          transform: rotate(-16deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        100% {
          -ms-transform: rotate(0deg); /* IE 9 */
          transform: rotate(0deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
      }

      .MenuButtonSecondGoOpen {
        opacity: 0;
      }
      .MenuButtonSecondGoClose {
        -webkit-animation: MenutionGoCloseSeFloor 0.5s linear;
        -o-animation: MenutionGoCloseSeFloor 0.5s linear;
        animation: MenutionGoCloseSeFloor 0.5s linear;
        animation-fill-mode: forwards;
      }
      @keyframes MenutionGoCloseSeFloor {
        0% {
          /*background: white;*/
          opacity: 0;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      /*给移动端菜单按钮，第3个横杠设置动画*/
      .MenuButtonThirdGoOpen {
        animation: MenuButtonGoOpenThFloor 0.3s linear;
        animation-fill-mode: forwards;
      }
      .MenuButtonThirdGoClose {
        animation: MenuButtonGoCloseThFloor 0.3s linear;
        animation-fill-mode: forwards;
      }
      @keyframes MenuButtonGoOpenThFloor {
        0% {
          -ms-transform: rotate(8deg); /* IE 9 */
          transform: rotate(8deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        25% {
          -ms-transform: rotate(16deg); /* IE 9 */
          transform: rotate(16deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        50% {
          -ms-transform: rotate(25deg); /* IE 9 */
          transform: rotate(25deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        75% {
          -ms-transform: rotate(34deg); /* IE 9 */
          transform: rotate(34deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        100% {
          -ms-transform: rotate(43deg); /* IE 9 */
          transform: rotate(43deg);
          -moz-transform-origin: top right;
          -webkit-transform-origin: top right;
          -o-transform-origin: top right;
        }
      }
      @keyframes MenuButtonGoCloseThFloor {
        0% {
          -ms-transform: rotate(43deg); /* IE 9 */
          transform: rotate(43deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        25% {
          -ms-transform: rotate(34deg); /* IE 9 */
          transform: rotate(34deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        50% {
          -ms-transform: rotate(25deg); /* IE 9 */
          transform: rotate(25deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        75% {
          -ms-transform: rotate(16deg); /* IE 9 */
          transform: rotate(16deg);
          -moz-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
        }
        100% {
          -ms-transform: rotate(0deg); /* IE 9 */
          transform: rotate(0deg);
          -moz-transform-origin: top right;
          -webkit-transform-origin: top right;
          -o-transform-origin: top right;
        }
      }
    }
    .header_mobile_nav {
      position: absolute;
      z-index: 999;
      width: 95%;
      left: 0;
      right: 0;
      height: 320px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      background-color: var(--background-primary);
      color: var(--text-bright);
      font-size: 16px;
      border-radius: 10px;
      span {
        padding: 5px 0;
        text-align: center;
      }
    }
  }
</style>
